<template>
  <div class="cate-classify combground">
    <div class="container">
      <div class="local">
        <img src="~/assets/images/local.png" alt="" />
        <span>
          当前位置 :
          <router-link to="/category">包装材料</router-link>
          <img src="@/assets/images/home/icon.png" alt="" />
          {{ name }}
          <span v-if="name2">
            <img src="@/assets/images/home/icon.png" alt="" />
            {{ name2 }}
          </span>
        </span>
      </div>
      <div class="comtitle">
        <h2 class="comh2">{{ name2 ? name2 : name }}</h2>
      </div>
      <div class="content">
        <div class="menu-wrap">
          <Menu @select="cateSelect" text-color="#666" active-text-color="#E48B2C" style="margin-bottom: 30px" :default-openeds="['1']">
            <Submenu index="1">
              <template slot="title">
                {{ name }}
              </template>
              <div style="max-height: 300px; overflow-y: auto">
                <menu-item-group>
                  <menu-item v-for="(item, index) in secondary" :key="index" :index="item.id.toString()">{{ item.cate_name }}</menu-item>
                </menu-item-group>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" style="margin-bottom: 30px" :default-openeds="['1']">
            <Submenu index="1">
              <template slot="title">
                应用领域
              </template>
              <div class="checkbox">
                <checkbox-group v-model="chosenFields">
                  <m-checkbox v-for="(item, index) in field" :key="index" :label="item.name" style="margin-bottom: 15px; width: 100px" />
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" style="margin-bottom: 30px">
            <Submenu v-for="(item, index) in specifi" :key="index" :index="index + ''">
              <template slot="title">
                {{ item.name }}
              </template>
              <div class="checkbox">
                <checkbox-group v-model="chosenSpecifi[index]">
                  <m-checkbox v-for="(i, v) in item.options" :key="v" :label="i.id" style="margin-bottom: 15px; width: 100px">{{ i.name }}</m-checkbox>
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" :default-openeds="['1']" style="margin-bottom: 30px">
            <Submenu index="1">
              <template slot="title">
                起订量
              </template>
              <div
                style="
                  display: inline-flex;
                  align-items: center;
                  padding: 20px 30px;
                "
              >
                <m-input v-model="moq" style="width: 199px; margin-right: 15px" />
                <span style="color: #666">Pcs</span>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" :default-openeds="['1']" style="margin-bottom: 30px">
            <Submenu index="1">
              <template slot="title">
                价格区间
              </template>
              <div
                style="
                  display: inline-flex;
                  align-items: center;
                  padding: 20px 30px;
                "
              >
                <div
                  style="
                    width: 209px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin-right: 15px;
                  "
                >
                  <m-input v-model="price.min" style="width: 83px" />
                  —
                  <m-input v-model="price.max" style="width: 83px" />
                </div>
                <span style="color: #666">元</span>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" style="margin-bottom: 30px" :default-openeds="['1']">
            <Submenu index="1">
              <template slot="title">
                产品状态
              </template>
              <div class="checkbox">
                <checkbox-group v-model="chosenStatus">
                  <m-checkbox v-for="(item, index) in status" :key="index" :label="item.name" style="margin-bottom: 15px; width: 100px" />
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>
          <Menu text-color="#666" active-text-color="#E48B2C" :default-openeds="['1']">
            <Submenu index="1">
              <template slot="title">
                资质认证
              </template>
              <div style="padding: 15px 15px 0" v-for="(key, index) in Object.keys(qualify)" :key="index">
                <div style="border-bottom: solid 1px #eaeaea">
                  <div style="font-size: 14px; color: #666; margin-bottom: 15px">{{ qualify[key].name }}</div>
                  <checkbox-group v-model="qualify[key].chosen">
                    <m-checkbox style="margin-bottom: 15px; width: 100px" v-for="(item, index2) in qualify[key].options" :key="index2" :label="item.value">
                      {{ item.name }}
                    </m-checkbox>
                  </checkbox-group>
                </div>
              </div>
            </Submenu>
          </Menu>
          <div class="menu-btns">
            <m-button width="145" type="bordered" @click="reset">重置</m-button>
            <m-button width="145" @click="confirm">确定</m-button>
          </div>
        </div>

        <div class="content-content">
          <div class="recommend-company">
            <div class="title">
              推荐企业
              <span class="btns">
                <span class="swiper-button-prev btn"><img src="~/assets/images/newleft.png" alt="" /></span>
                <span class="swiper-button-next btn"><img src="~/assets/images/newright.png" alt="" /></span>
              </span>
            </div>
            <swiper class="swiper" :options="panelSwiper1">
              <swiper-slide v-for="(item, index) in MerchantTuiList" :key="index">
                <div class="itemBox" @click="toCompanyHome(item.mer_id)">
                  <div class="picBox"><img :src="item.mer_avatar" :alt="item.mer_name" class="objectCover" /></div>
                  <p class="name">{{ item.mer_name }}</p>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="products">
            <div class="f16 cor666 mbt20">产品列表</div>
            <div class="list">
              <product-item
                v-for="(item, index) in proList"
                :key="index"
                :name="item.store_name || '暂无'"
                :price="item.price"
                :productId="item.product_id"
                :storage="item.moq"
                :image="item.image"
                class="item"
                @click.native="toCateProduct(item.product_id)"
              />
              <nodata message="该分类下暂时没有产品" :status="proStatus"></nodata>
            </div>
            <m-pagination :pagination="prototal" :page-size="proLimit" @changePage="changeThisPage" />
          </div>
        </div>
      </div>
      <!-- 推荐产品 -->
      <div class="recommend-products">
        <div class="title">
          推荐产品
          <span class="btns">
            <span class="swiper-button-prev1 btn"><img src="~/assets/images/newleft.png" alt="" /></span>
            <span class="swiper-button-next1 btn"><img src="~/assets/images/newright.png" alt="" /></span>
          </span>
        </div>
        <swiper class="swiper" :options="panelSwiper">
          <swiper-slide class="item" v-for="(item, index) in tuijianList" :key="index">
            <product-item
              :name="item.store_name"
              :storage="item.moq"
              :price="item.price"
              :image="item.image"
              :productId="item.product_id"
              :type="item.is_entity"
              :isCollect="item.is_hide_product"
              @click.native="toCateProduct(item.product_id)"
            />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { CheckboxGroup, Menu, MenuItem, MenuItemGroup, Submenu } from 'element-ui';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import MCheckbox from '@/components/common/m-checkbox/MCheckbox';
import MInput from '@/components/common/m-input/MInput';
import MButton from '@/components/common/m-button/MButton';
import MPagination from '@/components/common/m-pagination/MPagination';
import ProductItem from '@/components/common/ProductItem';
import { getProductsCategory, getProductsList, getRecommendProList } from '@/request/api';

export default {
  name: 'CateClassify', // 产品详情
  components: {
    ProductItem,
    MPagination,
    MButton,
    MInput,
    MCheckbox,
    Menu,
    MenuItemGroup,
    Submenu,
    MenuItem,
    CheckboxGroup,
    swiper,
    swiperSlide
  },
  data() {
    return {
      id: '',
      id2: '',
      name: '',
      name2: '',
      secondary: [],
      proPage: 1,
      proList: [],
      proStatus: 1,
      prototal: 1,
      proLimit: 8,
      panelSwiper1: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 8,
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        },
        observer: true
      },
      panelSwiper: {
        slidesPerView: 5,
        slidesPerGroup: 5,
        spaceBetween: 16,
        observer: true,
        navigation: {
          nextEl: '.swiper-button-next1',
          prevEl: '.swiper-button-prev1',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        }
      },
      tuijianList: [],
      MerchantTuiList: [],
      field: [
        {
          name: '面部护理'
        },
        {
          name: '身体护理'
        },
        {
          name: '头发头皮'
        },
        {
          name: '造型设计'
        }
      ],
      chosenFields: [],
      specifi: [
        {
          name: '螺纹类型',
          options: [
            {
              name: '产品规格一1',
              id: '1-1'
            },
            {
              name: '产品规格一2',
              id: '1-2'
            },
            {
              name: '产品规格一3',
              id: '1-3'
            }
          ]
        },
        {
          name: '材质',
          options: [
            {
              name: '产品规格二1',
              id: '2-1'
            },
            {
              name: '产品规格二2',
              id: '2-2'
            }
          ]
        },
        {
          name: '形状',
          options: [
            {
              name: '产品规格三1',
              id: '3-1'
            },
            {
              name: '产品规格三2',
              id: '3-2'
            },
            {
              name: '产品规格三3',
              id: '3-3'
            },
            {
              name: '产品规格三4',
              id: '3-4'
            },
            {
              name: '产品规格三5',
              id: '3-5'
            }
          ]
        },
        {
          name: '产品规格四',
          options: [
            {
              name: '产品规格四1',
              id: '4-1'
            },
            {
              name: '产品规格四2',
              id: '4-2'
            },
            {
              name: '产品规格四3',
              id: '4-3'
            },
            {
              name: '产品规格四4',
              id: '4-4'
            }
          ]
        }
      ],
      chosenSpecifi: [[], [], [], []],
      price: {
        min: '',
        max: ''
      },
      moq: '',
      status: [
        {
          name: '免费样品'
        },
        {
          name: '库存现货'
        },
        {
          name: '支持PCR'
        },
        {
          name: '支持定制'
        }
      ],
      chosenStatus: [],
      qualify: {
        certify: {
          name: 'PackMate认证',
          options: [
            {
              name: 'PackMate认证',
              value: 1
            }
          ],
          chosen: []
        },
        quality: {
          name: '质量管理体系',
          options: [
            {
              name: 'IOS9001',
              value: 'is_ios9001'
            },
            {
              name: 'ISO22716',
              value: 'is_iso22716'
            },
            {
              name: 'GMP',
              value: 'is_gmp'
            },
            {
              name: 'BRC',
              value: 'is_brc'
            },
            {
              name: '其他',
              value: 'is_quality'
            }
          ],
          chosen: []
        },
        environment: {
          name: '环境管理认证',
          options: [
            {
              name: 'ISO14001',
              value: 'is_iso14001'
            },
            {
              name: '其他',
              value: 'is_ambient'
            }
          ],
          chosen: []
        },
        society: {
          name: '社会责任体系',
          options: [
            {
              name: 'SA8000',
              value: 'is_sa8000'
            },
            {
              name: 'ISO26000',
              value: 'is_iso26000'
            },
            {
              name: 'BSCI',
              value: 'is_bsci'
            },
            {
              name: 'SMETA',
              value: 'is_smeta'
            },
            {
              name: '其他',
              value: 'is_society'
            }
          ],
          chosen: []
        },
        security: {
          name: '职业健康与安全',
          options: [
            {
              name: 'ISO45001',
              value: 'is_iso45001'
            },
            {
              name: 'OHSAS18001',
              value: 'is_ohsas18001'
            },
            {
              name: '其他',
              value: 'is_safe'
            }
          ],
          chosen: []
        },
        product: {
          name: '产品认证',
          options: [
            {
              name: 'FSC',
              value: 'is_fsc'
            },
            {
              name: 'GRS',
              value: 'is_grs'
            },
            {
              name: 'Ocean Cycle',
              value: 'is_ocean_cycle'
            },
            {
              name: '其他',
              value: 'is_produce'
            }
          ],
          chosen: []
        }
      }
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.name = this.$route.query.name;
    this.getCateList();
    this.getProducts();
    this.getProducts('tui');
    this.getMerchatTui();
  },
  methods: {
    /** 获取推荐商品列表 */
    getMerchatTui() {
      getRecommendProList()
        .then(res => {
          this.MerchantTuiList = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    selectSpecifi(index, v) {
      let chosen = this.specifi[index].options[v].chosen;
      this.specifi[index].options[v].chosen = !chosen;
    },
    /** 重置筛选条件 */
    reset() {
      this.chosenFields = [];
      this.chosenSpecifi = [
        {
          chosen: []
        },
        {
          chosen: []
        },
        {
          chosen: []
        },
        {
          chosen: []
        }
      ];
      this.moq = '';
      this.price.min = this.price.max = '';
      this.chosenStatus = [];
      Object.assign(this.$data.qualify, this.$options.data().qualify);
      this.getProducts();
    },
    /** 搜索 */
    handleSearch() {
      // todo 缺少接口对接
    },
    confirm() {
      this.getProducts();
    },
    cateSelect(id) {
      for (let i in this.secondary) {
        if (this.secondary[i].id == id) {
          this.name2 = this.secondary[i].cate_name;
        }
      }
      this.proPage = 1;
      this.id2 = id;
      this.getProducts();
    },
    getCateList() {
      let data = {
        is_entity: '1',
        page: 1,
        limit: 0,
        pid: this.id,
        num: 0
      };
      getProductsCategory(data).then(res => {
        this.secondary = res.data.data;
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    /**
     * @param { string } type
     * 获取产品列表
     */
    getProducts(type) {
      this.proStatus = 1;
      this.list = [];
      let field_list = '';
      this.field.forEach(item => {
        if (this.chosenFields.includes(item.name)) {
          field_list += '1';
        } else {
          field_list += '0';
        }
      });
      let pro_ste = '';
      this.status.forEach(item => {
        if (this.chosenStatus.includes(item.name)) {
          pro_ste += '1';
        } else {
          pro_ste += '0';
        }
      });
      let auth = [];
      auth = auth.concat(
        auth,
        this.qualify.quality.chosen,
        this.qualify.environment.chosen,
        this.qualify.society.chosen,
        this.qualify.security.chosen,
        this.qualify.product.chosen
      );
      auth = this.$common.arrToString(auth);
      let data = {};
      if (type === 'tui') {
        data = {
          is_entity: '1',
          is_tui: 1,
          limit: 10
        };
      } else {
        data = {
          is_entity: '1',
          page: this.proPage,
          limit: this.proLimit,
          field_list: field_list === '0000' ? '' : field_list,
          moq: this.moq,
          price_min: this.price.min,
          price_max: this.price.max,
          pro_ste: pro_ste === '0000' ? '' : pro_ste,
          is_packmate: this.qualify.certify.chosen[0] || '',
          auth: auth
        };
      }
      if (this.id2) {
        data.pid = this.id;
        data.cate_id = this.id2;
      } else {
        data.pid = 0;
        data.cate_id = this.id;
      }
      getProductsList(data)
        .then(res => {
          if (type == 'tui') {
            this.tuijianList = res.data.data;
          } else {
            this.proList = res.data.data;
            this.prototal = res.data.total;
            if (res.data.total === 0) {
              this.proStatus = 0;
            } else {
              this.proStatus = 2;
            }
            window.scrollTo({
              top: 0
            });
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    changeThisPage(page) {
      this.proPage = page;
      this.getProducts();
    },
    // 企业详情-新页面
    toCompanyHome(id) {
      let { href } = this.$router.resolve({
        name: 'CompanyHomeHome',
        params: {
          id
        }
      });
      window.open(href, '_blank');
    },
    // 进入产品详情页面
    toCateProduct(id) {
      let { href } = this.$router.resolve({
        name: 'CateProduct',
        params: {
          id
        }
      });
      window.open(href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';

.local {
  color: #656565;
  margin-bottom: 67px;
  position: relative;
  top: 40px;
  left: 50px;
}

.local img {
  margin-right: 10px;
}

.cate-classify {
  padding: 0 0 80px 0;

  /deep/ .el-submenu__title {
    height: 45px;
    line-height: 45px;
    background-color: $theme-color-1;
    color: #fff !important;
    border-bottom: 1px solid #fff;
  }

  /deep/ .el-submenu__icon-arrow {
    color: #fff;
  }

  .content {
    width: 1200px;
    padding: 0 50px 65px;
    margin-top: 50px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .menu-wrap {
      height: 100%;
      width: 305px;
      position: relative;

      .checkbox {
        padding: 15px 15px 0;
      }

      .menu-btns {
        position: absolute;
        bottom: -70px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .content-content {
      width: calc(97% - 305px);
      font-size: 15px;
      color: #666;

      .recommend-company {
        padding: 15px;
        background-color: #fff;
        margin-bottom: 30px;

        .title {
          font-size: 20px;
          padding-left: 15px;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          .btns {
            display: flex;
            position: relative;
            right: 4px;

            .btn {
              position: static;
              width: 34px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              cursor: pointer;
              margin-top: 0;
              outline: none;

              &:first-of-type {
                margin-right: 0;
              }
            }

            .swiper-button-prev {
              background-image: none;
            }

            .swiper-button-next {
              background-image: none;
            }
          }
        }

        .title:before {
          content: '';
          position: absolute;
          left: 0;
          top: 22%;
          bottom: auto;
          right: auto;
          height: 60%;
          width: 4px;
          background-color: #4d4d4d;
          border-radius: 5px;
        }

        .list {
          margin: -10px;

          .item {
            display: inline-block;
            border: solid 1px #eaeaea;
            padding: 10px;
            margin: 10px;
            cursor: pointer;

            .pic {
              width: 100%;
              height: 150px !important;
            }
          }
        }
      }

      .products {
        .title {
          margin-bottom: 15px;
        }

        .list {
          margin: -10px;
          margin-bottom: 15px;

          .item {
            width: calc((100% - 80px) / 4);
            margin: 10px;
          }
        }
      }
    }
  }

  .swiper-slide {
    margin: 0;
  }

  .itemBox {
    width: 100%;
    border: solid 1px #eaeaea;
    padding: 10px;
    cursor: pointer;
    text-align: center;

    .picBox {
      width: 100%;
      height: 100px;
    }
    .name {
      @include text-omitted(1);
    }
  }

  .recommend-products {
    margin-top: 20px;
    padding: 0 50px;
    font-size: 16px;

    .title {
      padding-left: 15px;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .list {
      margin: -10px;
      position: relative;

      .prev,
      .next {
        width: 24px;
        height: 42px;
        line-height: 43px;
        text-align: center;
        background-color: $theme-color-1;
        color: #fff;
        position: absolute;
        cursor: pointer;

        &.prev {
          left: 0;
          top: calc(50% - 21px);
        }

        &.next {
          right: 0;
          top: calc(50% - 21px);
        }
      }
    }
  }
}

.recommend-products {
  position: relative;

  .prev,
  .next {
    width: 24px;
    height: 42px;
    line-height: 43px;
    text-align: center;
    background-color: $theme-color-1;
    color: #fff;
    position: absolute;
    cursor: pointer;
    outline: none;

    &.prev {
      left: 30px;
      top: calc(55% - 21px);
      z-index: 10;
    }

    &.next {
      right: 30px;
      top: calc(55% - 21px);
      z-index: 10;
    }
  }

  .title {
    position: relative;
  }

  .title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: auto;
    right: auto;
    height: 60%;
    width: 4px;
    background-color: #4d4d4d;
    border-radius: 5px;
  }

  .btns {
    display: inline-block;
    position: absolute;
    right: 4px;

    .btn {
      position: static;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      margin-top: 0;
      outline: none;

      &:first-of-type {
        margin-right: 15px;
      }
    }

    .swiper-button-prev1 {
      background-image: none;
    }

    .swiper-button-next1 {
      background-image: none;
    }
  }
}

.el-menu-item {
  height: 40px;
  line-height: 40px;
  position: relative;
}

.el-menu-item:after {
  content: ' ';
  position: absolute;
  left: 25px;
  top: 16px;
  width: 6px;
  height: 6px;
  background-color: #4f4f4f;
  border-radius: 4px;
}

.el-menu-item:hover {
  color: #e48b2c !important;
}

/deep/ .el-menu-item:hover::after {
  background-color: #e48b2c !important;
}
</style>
